<?php include "../public/header.php";?>
<?php include "../public/header_edit.php";?>
<style>
    #preview_div{width: 100%;overflow: auto;position: relative}
    #preview_table{max-width: unset!important;}
    #preview_table th,#preview_table td{text-align: center;width: 150px;height: 35px}
    #preview_table th select{width: 100%;height: 35px;display: block!important;border: none}
    #preview_table th:nth-child(1){min-width: 60px!important;}
    #preview_table th:nth-child(2){min-width: 60px!important;}
    #preview_table thead{display: block;overflow: hidden;overflow-y: scroll;}
    #preview_table thead tr{display: table;table-layout: fixed;width: 100%;}
    #preview_table tbody{display: block;overflow: hidden;overflow-y: auto;}
    #preview_table tbody tr{display: table;table-layout: fixed;width: 100%;}
    #preview_table tbody tr td:nth-child(1){position:relative;width:60px;height:35px;background-color:#1E9FFF;color:#FFFFFF;min-width: 60px!important;}
    #preview_table tbody tr td:nth-child(2){position:relative;width:60px;height:35px;background-color:#1E9FFF;color:#FFFFFF;min-width: 60px!important;}
</style>
<body>
<form class="layui-form layui-form-pane" id="operatePage">
    <div class="page-title"><div class="page-title-con">
            <span>导入</span>
            <div class="page-title-opt-list">
                <button type="button" class="layui-btn layui-btn-sm btn-dark marginr5" lay-submit="" lay-filter="add">提交</button>
                <span id="page-close" class="page-close" onclick="layer_close()">×</span>
            </div>
        </div>
    </div>

    <div class="main-container" style="margin: 0 15px;">
        <div id="timsg" style="margin: 0;height: 40px;line-height: 40px">
            <span>如数据有误，请单击表格修改</span>
            <span id="import_error" style="color:red;font-size: 16px;margin-left: 20px"></span>
        </div>
        <div id="preview_div" onscroll="import_onscroll(this)">
            <table id="preview_table" style="width:100%;border: 1px solid #aaa;" border="1"></table>
        </div>
    </div>
</form>
<script>
    var param_url = getQueryVariable('url') || '';
    var param_sheet = getQueryVariable('sheet') || '';
    var param_start = getQueryVariable('start') || 1;
    var param_type = getQueryVariable('type') || '';


    var tbodyHei = $("body").height()-140;
    var fieldArr = [
        {field: 'name', name:'名称及规格', ismust: 1},
        {field: 'unit', name:'单位', ismust: 1},
        {field: 'num', name:'采购数量', ismust: 1},
        {field: 'price', name:'采购单价', ismust: 1},
        {field: 'explain', name:'备注', ismust: 0},
    ];

    layui.use(['laytp', 'form'], function() {
        var form = layui.form, layer = layui.layer;

        facade.ajax({url: ask_import_data, data:{sheet:param_sheet, start:param_start}}).done(function(res){
            if (res.code === 2000) {
                show_excel_table(res.data.data)
            }
        });

        form.on('submit(add)', function(data){
            var selectArr = [];
            var selectName = [];
            var select_error = '';
            var select_obj = $("#preview_table>thead>tr>th>select");
            for (var i = 0; i < select_obj.length; i++) {
                var currName = $(select_obj[i]).val();
                var currText = $(select_obj[i]).find("option:selected").text();
                var currKey = $(select_obj[i]).parent().attr('key');
                if (currName) {
                    if (selectName.indexOf(currName) == -1) {
                        selectName.push(currName);
                        var lin_obj = {};
                        lin_obj.key = currKey;
                        lin_obj.field = currName;
                        selectArr.push(lin_obj);
                    } else {
                        select_error = "“"+currText+"”" + "重复";
                        break;
                    }
                }
            }
            if (select_error != '') {
                facade.error(select_error);
                return false;
            }
            if (selectArr.length < 1) {
                facade.error("请选择要导入的字段");
                return false;
            }

            for (i = 0; i < fieldArr.length; i++) {
                if (fieldArr[i].ismust == 1) {
                    if (selectName.indexOf(fieldArr[i].field) == -1) {
                        select_error = "“"+fieldArr[i].name+"”为必选字段";
                        break;
                    }
                }
            }
            if (select_error != '') {
                facade.error(select_error);
                return false;
            }


            var contentTr = $("#preview_table>tbody>tr");
            var return_data = [];

            for (i = 0; i < contentTr.length; i++) {
                var hang_obj = {};
                for (var j = 0; j < selectArr.length; j++) {
                    var curKey = selectArr[j].key;
                    var curField = selectArr[j].field;
                    var inputArr = $(contentTr[i]).children('td');
                    for (var ii = 0; ii < inputArr.length; ii++) {
                        if ($(inputArr[ii]).children('input').attr('key') == curKey) {
                            hang_obj[curField] = $(inputArr[ii]).children('input').val();
                        }
                    }
                }
                if (JSON.stringify(hang_obj) != "{}") {
                    return_data.push(hang_obj);
                }
            }




            //添加明细数据
            for (var key in return_data){
                return_data[key].explain = return_data[key].explain || '';
                var str = '';
                str += '<tr>';
                str += '<td style="width: 45px">1</td>';
                str += '<td class="layui-hide">';
                str += '<input type="text" onclick="choose_engin_budget_list_one(this)" listid="0" readonly placeholder="请选择" class="layui-input subname disabled">';
                str += '</td>';
                str += '<td class="layui-hide"><input type="text" disabled class="layui-input guiname disabled"></td>';
                str += '<td><input type="text" class="layui-input name" value="'+return_data[key].name+'"></td>';
                str += '<td><input type="text" class="layui-input unit" value="'+return_data[key].unit+'"></td>';
                str += '<td><input type="number" class="layui-input num" value="'+return_data[key].num+'"></td>';
                str += '<td><input type="number" class="layui-input price" value="'+return_data[key].price+'"></td>';
                str += '<td><input type="number" class="layui-input money disabled" disabled></td>';
                str += '<td><input type="text" class="layui-input explain" value="'+return_data[key].explain+'"></td>';
                str += '</tr>';
                $("#cai_list", parent.document).append(str);
            }

            if (typeof(window.parent.update_refresh_row_func)!="undefined"){
                window.parent.update_refresh_row_func();
            }

            layer_close();
            return false;
        });
    });





    function show_excel_table(data) {
        var max_tr_length = 0;
        if(data[0]){
            for (var mm in data[0]){
                max_tr_length++;
            }
        }

        var str = '';
        str +='<thead>';
        str +='<tr style="height:35px;">';
        str += '<th style="width: 60px">操作</th>';
        str += '<th style="width: 60px">行号</th>';
        for(var i=1; i<=max_tr_length; i++){
            str +='<th  key="'+i+'">';
            str += get_select_html(i);
            str +='</th>';
        }
        str +='</tr>';
        str +='</thead>';
        str +='<tbody>';

        //获取内容
        for(var i = 0; i < data.length;i++){
            str +='<tr>';
            var xuhao = i+1;
            str +='<td style="text-align:center;color: red;cursor:  pointer;"><span class="delect_tr">删</span></td>';
            str += '<td>'+xuhao+'</td>';
            var content_i = 1;
            for(var key in data[i]){
                str +='<td><input key="'+content_i+'" style="width: 98%;;text-align:center;height:35px;border:0;" type="text" value="'+data[i][key]+'"></td>';
                content_i++;
            }
            str +='</tr>';
        }
        str +='</tbody>';
        $("#preview_table").append(str);

        $(".delect_tr").click(function(){
            $(this).parent().parent().remove();
            var tr_obj = $("#preview_table>tbody>tr");
            for(var i=0; i<tr_obj.length; i++){
                var ii = i;
                $(tr_obj[i]).children('td:nth-child(2)').html(ii+1);
            }
            if($('#preview_table').find('tbody').height() >= tbodyHei){
                $('#preview_table thead').css('overflow-y','scroll')
            }else{
                $('#preview_table thead').css('cssText','overflow-y:unset!important')
            }
        })

        $("#preview_table tbody").css('max-height', tbodyHei+'px');
        if($('#preview_table').find('tbody').height() >= tbodyHei){
            $('#preview_table thead').css('overflow-y','scroll')
        }else{
            $('#preview_table thead').css('cssText','overflow-y:unset!important')
        }
    }


    function get_select_html(iii=0) {
        var str = '<select>';
        str += '<option value="">请选择字段</option>';
        for (var i=0; i<fieldArr.length; i++){
            var sele_html = '';
            if(parseInt(i)+1 == iii){
                sele_html = 'selected';
            }

            if(fieldArr[i].ismust == 1){
                str += '<option value="'+fieldArr[i].field+'" style="color: red" '+sele_html+'><text>*'+fieldArr[i].name+'</text></option>';
            }else{
                str += '<option value="'+fieldArr[i].field+'" '+sele_html+'>&nbsp;&nbsp;'+fieldArr[i].name+'</option>';
            }

        }
        str += '</select>';
        return str;
    }


    function import_onscroll(obj) {
        var wleft = $(obj).scrollLeft();
        $("#preview_table tbody tr td:nth-child(1)").css('left',wleft+'px');
        $("#preview_table tbody tr td:nth-child(2)").css('left',wleft+'px');
    }

</script>
</body>
</html>
